Html 5知识点小计

2018-03-14

html5中的一些常用知识点

一、主要常用的布局标签：

<header>：页面的头部区域
<footer>：页面的脚部区域
<nav>：页面导航元素

<article>：页面主体区域的一块主体内容
<section>：article里面的一段区域内容
<aside>：页面主体区域中附属内容
<main> 标签规定文档的主要内容。为规范，不要在页面里出现2个 <main> ，
不能是以下元素的后代  
<footer>、<header> <article>、<aside> <nav>。
<menu>页面菜单元素

1 2	<menu><li>home</li><li>home</li><li>home</li></menu> <h3> <span> <p> <em> <strong>

二、其他常见备用的H5布局标签和点缀标签

1.hgroup 标题标签

1	<hgroup><h2>HTML5简单吗</h2><h2>很简单啊</h2></hgroup>

2.address地址标签，一般在footer里包含地址的标签

1	<address>住址:杭州西湖区</address>

3.mark高亮显示

1	<mark>H5</mark>

4.time标签定义日期和时间–可以单独给时间单独设个强调的样式

1	<time>9:00</time>

好处：将原来div标签换成新的容易识别的名称标签，叫做标签的语义化，标签语义化的目的就是对搜索引擎友好，结合简洁清晰的布局结构，能更容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少钱，而且可维护性更高，因为结构清晰,十分易于阅读

1	<div>我很有钱</div>

对于搜索引擎来说，你只是很普通的div屌丝，尽管你真的很有钱。

1	<h1>我很有钱</h1>

搜索引擎知道这个标签里文字重要性，会重点关注你很有钱
标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视

三．H5多媒体标签：video、audio、

1.Video 视频标签

<video width="400"  
height=”200” src="1.mp4 "  
controls="controls"   loop="loop" hidden="hidden"/>
```  

```html
您的浏览器版本过低，请升级浏览器！ </video>
简写：<video  src="1.swf " width="400" height=”400” controls  autoplay loop /></video>

autoplay:音频在就绪后自动播放。autoplay=”autoplay”
controls: 如果出现该属性，则向用户显示控件，比如播放按钮。
loop: 如果出现该属性，会循环播放
hidden: 隐藏播放界面
支持3种视频格式Ogg MP4 WebM

2.Audio 音频标签和视频标签一样写法（现在高版本的谷歌或者火狐其实支持性都很好，万一版本低不支持，就用MP4和ogg）
下图是低版本的谷歌和火狐可能不支持，其实高版本的支持性都很好；
使用2种格式，能几乎兼容所有浏览器，浏览器会自动根据版本播放

<audio  controls  autoplay  loop  hidden />	
<source src="1.mp4"  type="video/mp4" />
<source src="1.ogg"  type="video/ogg" /> </audio>
```  

如果你觉得他默认的插件太丑，想做个自定义的播放器，需要JS的支持  

```js
var audio = document.getElementById('music1');
audio.play();//播放   audio.pause();//暂停   audio.currentTime=0;//停止
```  
### 四.HTML5表单
   新增默认内容
```js
<input type="text" placeholder="请输入用户名"/>

新增不能为空属性：

1	input type="text" required="required" />

Datalist元素有助于提供文本框自动完成特性（自动检索输入）

<input type="text" list="aa" placeholder="明星排行榜"  />
<datalist id="aa">（id名称要与list定义的名称一样）
    <option label="Top1" value="范冰冰">
    <option label="Top2" value="刘涛">
    <option label="Top3" value="刘亦菲">
</datalist>

五.新增的表单元素

统一写法

1	<input type="color（元素名称）" name="">

以下针对移动端的时候，会自动跳出相对应的键盘

颜色选择文本框<input type="Color" name="">
日历选择文本框<input type="Date" name=""  required="required">
带时间的日历框<input type="Datetime-local" name="">
输入时间文本框<input type="Time" name="">
输入月份文本框<input type="month" />
输入几周文本框<input type="week" />
邮箱地址文本框<input type="Email" name="">
输入网址文本框<input type="Url" name="">
拖动范围文本框<input type="Range" name="" step="1" value="60"  min="1" max="100">（step代表每次拖动区域，value是默认位置，min和max为可拖动的大区间）
数字范围文本框<input type="Number" name=""  step="2" value="2"  min="1" max="5">
电话号码文本框<input type="Tel" name="">(移动端会直接跳出号码数字框)<br>
搜索栏目文本框<input type="Search" name=""><br>
上传文件文本框<input type="file" name=""><br>

六．HTML5图形绘制

SVG 指可伸缩矢量图形 (图像在放大或改变尺寸的情况下其图形质量不会有损失）
SVG 使用HTML元素绘制的2D图形
SVG 图像可通过样式或JS来控制和修改，
SVG 图像可被搜索、索引、脚本化或压缩（比普通图像占空间更小）
简单来说，是用HTML创建的矢量图形，类似文字一样可以随意更改其大小和颜色，和PS里做的JPG有本质区别,常用于移动端中

1.针对svg画线—标签

边框色 stroke属性
线的宽度stroke-width 线的端点stroke-linecap
线的两端点方形stroke-linecap=”square”
线的两端点圆形stroke-linecap=”round”

1	<svg><line id="" x1="30%" y1="20" x2="100" y2="200" stroke="#F00" stroke-width="5"/></svg>

X1 和Y1来确定第一个端点 X2和Y2确定第2个端点

2.针对svg画圆——标签

使用cx=”” cy=”” 定义圆心 r=”50” - - 定义半径，fill=”red”为圆填充颜色。stroke=”blue” stroke-width=”2”定义圆周线条颜色和宽度

1	<svg><circle id="" cx="100" cy="100" r="50" fill="red" stroke="blue" stroke-width="2" /></svg>

3.针对svg画椭圆——标签

椭圆中心 cx=”120”cy=”60”，X轴半径 rx=”100” Y轴半径 ry=”50”,填充颜色fill，
边框宽度stroke-width，边框颜色stroke

1	<ellipse cx="100" cy="60" rx="100" ry="50" fill="red" stroke="blue" stroke-width="2" />

4.针对svg画矩形—–标签

用 width=”300” height=”100” 定义高宽，填充颜色fill，边框宽度stroke-width，
边框颜色stroke
设置填充色透明度fill-opacity=”0.5” stroke-opacity=”0.5”

1	<svg><rect width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/> </svg>

5.针对SVG画多边形—标签

用point定义几个多边形顶点，方向为顺时针
定义了四个顶点(10,10),(20,50),(30,60)，(40,70)

1	<svg> <polygon points="10,10 20,50 30,60 40,70" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/> </svg>

复杂SVG图形直接在AI里绘制好后另存为SVG, 能生成path(路径)标签，要记得另存SVG的时候，要将图形里的所有路径复合（合并一起），免得生成的path太多，控制起来麻烦，框选所有路径，对象→复合选项→建立，

控制svg颜色宽高边框都可以通过css来控制，但是控制其大小有窍门，必须先设置好视区范围—–viewBox=”x, y, width, height” 定位起始位置x:左上角X坐标，y:左上角Y坐标，width:宽度，height:高度,一般来说XY都设为0 里面的宽高要跟AI里那图标的宽高一模一样，然后在控制swg标签里的宽高即可实现

1	<svg width=”100px” height=”100px” viewBox="0 0 200 200">

AI里面图标实际宽高是200px200px，用viewbox获取
实际图标显示在html5里面的宽高是100px100px
字体图标http://www.iconfont.cn/的制作
iconfont常用于移动端，一个正规的移动端的图标往往都是iconfont或SVG图片

Canvas 绘图(实际中工作中用的很少)

<canvas  id="aa"></canvas><!--创建画布绘制区域-->
<script type="text/javascript">
var canvas=document.getElementById('aa');//声明个变量获取到canvas对象
var ctx=canvas.getContext('2d');//获取该canvas的2D绘图环境
ctx.fillStyle='#FF0000';//绘制代码：填充红色的背景色
ctx.fillRect(0,0,80,100);//绘制代码：绘制一个矩形，起始点坐标为 X=0,Y=0,width=80,height=100
</script>

Canvas————–用JS来编写
固定的分辨率（和PS里一样的位图图形）
根据JS的判断和运算进行动态绘制，绘制可以来回重复，适合于做游戏（游戏中会应用JS对事件的判断确定如何绘制图形）

SVG——————-用html编写
没有固定的分辨率（和AI里面一样的矢量图形）
纯粹的整片图形绘制，最适合带有大型渲染区域的应用程序（比如百度地图）